<template>
  <div class="all-data">
    <div v-if="dataBean && dataBean.data.length > 0">
      <el-row :gutter="21" class="data-row">
        <el-col :span="7"><div class="grid-content bg-purple">用户昵称</div></el-col>
        <el-col :span="7"><div class="grid-content bg-purple">关注时间</div></el-col>
        <el-col :span="7"><div class="grid-content bg-purple">操作</div></el-col>
      </el-row>
      <el-row :gutter="21" class="data-item" v-if="dataBean" v-for="(item, index) in dataBean.data" :key="item.id">
        <el-col :span="7">
          <div class="grid-content bg-purple cursor" @click="$router.push({name: 'search-detail', query: {userId: item.attentionUserId}})">
            <el-link :underline="false">
              {{item.attentionUserNickName}}
            </el-link>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            {{item.attentionTime}}
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <el-button slot="reference" type="danger" size="small" title="取消关注" icon="el-icon-delete" circle @click="canalColl(item)"></el-button>
          </div>
        </el-col>
      </el-row>
      <el-pagination
          class="page"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="dataBean.pageSize"
          :total="dataBean.total">
      </el-pagination>
    </div>

    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script>
import { unAttention, getAttentionUserList} from "@/api/user";

  export default {
    name: "AttentionInfo",
    data(){
      return {
        dataBean: {},
        params:{
          pageNum:1,
          pageSize:10
        }
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        getAttentionUserList(this.params).then(res => {
          this.dataBean = res.data
        })
      },
      handleCurrentChange(val){
        this.params.pageNum = val
        this.init()
      },
      canalColl(item) {
        unAttention(item.attentionUserId).then(res => {
          this.$message.success(res.msg)
          this.init()
        })
      }
    }
  }
</script>

<style scoped lang="less">
.all-data{
  .data-row{
    border-bottom: 1px solid #cccccc;
    font-weight: 600;
    height: 40px;
  }
  .data-item{
    border-bottom: 1px solid #cccccc;
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .page{
    text-align: right;
    margin-top: 10px;
  }
}
</style>
